<template>
  <border :moduleType="borderConfig.moduleType"
          :icon="borderConfig.icon"
          :titleText="borderConfig.titleText">
    <div class="module"
         slot="module-content"
         v-if="moduleConfig instanceof Array">
      <div class="message-li-main"
           :class="borderConfig.optionsDirection"
           v-for="(item, index) in moduleConfig"
           :key="index">
        <div :class="{'legend-level': moduleConfig[index].legendDirection == 'level',
             'legend': moduleConfig[index].legendDirection != 'level',
             'legend-list-left': moduleConfig[index].legendClassName}"
             v-if="moduleConfig[index].legendList && moduleConfig[index].legendList.length > 0">
          <div class="legend-li"
               v-for="(legendItem, legendIndex) in moduleConfig[index].legendList"
               :key="legendIndex">
            <i :style="{background: legendColor[legendItem.colorIndex] }" v-if="typeof legendItem == 'object'"></i>
            <i v-else></i>
            <span>{{typeof legendItem == 'object' ? legendItem.name : legendItem}}</span>
          </div>
        </div>
        <div class="btn-list"
             v-if="isShowDimension">
          <span :class="{'active': dimensionIndex === index}"
                v-for="(btnItem, btnIndex) in dimensionArr"
                :key="btnIndex"
                @click="changeDimension(btnIndex)">{{btnItem}}<i></i></span>
        </div>
        <barLine
          :ref="'barLine' + index"
          :title="moduleConfig[index].optionsConfig.title"
          :legend="moduleConfig[index].optionsConfig.legend"
          :xAxis="moduleConfig[index].optionsConfig.xAxis"
          :yAxis="moduleConfig[index].optionsConfig.yAxis"
          :tooltip="moduleConfig[index].optionsConfig.tooltip"
          :dataZoom="dataZoom"
          :seriesData="moduleConfig[index].optionsConfig.seriesData"
          :axis="moduleConfig[index].optionsConfig.axis"
          :config="moduleConfig[index].optionsConfig.config"
          :grid="moduleConfig[index].optionsConfig.grid"
          :tooltipsConfig="moduleConfig[index].optionsConfig.tooltipsConfig"
          :isCallback="moduleConfig[index].optionsConfig.isCallback"></barLine>
      </div>
    </div>
    <div class="module"
         slot="module-content"
         v-else>
      <div class="message-li-main">
        <div :class="{'legend-level': moduleConfig.legendDirection == 'level',
              'legend': moduleConfig.legendDirection != 'level',
              'legend-list-left': moduleConfig.legendClassName}"
             v-if="moduleConfig.legendList && moduleConfig.legendList.length > 0">
          <div class="legend-li"
               v-for="(item, index) in moduleConfig.legendList"
               :key="index">
            <i :style="{background: legendColor[item.colorIndex] }" v-if="typeof item == 'object'"></i>
            <i v-else></i>
            <span>{{typeof item == 'object' ? item.name : item}}</span>
          </div>
        </div>
        <div class="btn-list"
             v-if="isShowDimension">
          <span :class="{'active': dimensionIndex === index}"
                v-for="(item, index) in dimensionArr"
                :key="index"
                @click="changeDimension(index)">{{item}}<i></i></span>
        </div>
        <barLine
          v-if="moduleType == 'barLine'"
          ref="barLine"
          :title="moduleConfig.optionsConfig.title"
          :legend="moduleConfig.optionsConfig.legend"
          :xAxis="moduleConfig.optionsConfig.xAxis"
          :yAxis="moduleConfig.optionsConfig.yAxis"
          :tooltip="moduleConfig.optionsConfig.tooltip"
          :dataZoom="dataZoom"
          :seriesData="moduleConfig.optionsConfig.seriesData"
          :axis="moduleConfig.optionsConfig.axis"
          :config="moduleConfig.optionsConfig.config"
          :grid="moduleConfig.optionsConfig.grid"
          :tooltipsConfig="moduleConfig.optionsConfig.tooltipsConfig"
          :isCallback="moduleConfig.optionsConfig.isCallback"></barLine>
        <Pie
          v-else
          ref="pie"
          :isUseValue="moduleConfig.optionsConfig.isUseValue"
          :value="moduleConfig.optionsConfig.value"
          :pieLegend="moduleConfig.optionsConfig.legend"
          :limitLength="moduleConfig.optionsConfig.limitLength"
          :pieType="pieType"
          :notOther="moduleConfig.optionsConfig.notOther"
          :labelLine="moduleConfig.optionsConfig.labelLine"
          :labelShow="moduleConfig.optionsConfig.labelShow"
          :seriesRadius="seriesRadius"
          :tooltipsUnit="moduleConfig.optionsConfig.tooltipsUnit"
          :isUseComputedLine="moduleConfig.optionsConfig.isUseComputedLine"></Pie>
      </div>
    </div>
  </border>
</template>

<script>
import Border from './Border.vue'
import BarLine from './BarLine'
import Pie from './Pie.vue'
export default {
  components: {
    Border,
    BarLine,
    Pie
  },
  props: {
    // borderConfig.optionsDirection当一个模块里面有两个图表的时候， 传入level水平排序， 传入vertical垂直分布
    borderConfig: {
      type: Object,
      required: true
    },
    // 图表配置，当时双图表的时候，optionsConfig[0]为第一个图表的内容
    moduleConfig: {
      type: [Object, Array],
      required: false
    },
    // 图例内容，当时双图表的时候，legendList[0]为第一个图表的内容
    legendList: {
      type: [Array],
      default: () => []
    },
    // 图例是否靠左排放
    legendClassName: {
      type: Boolean,
      default: false
    },
    // 图例的排放
    legendDirection: {
      type: String,
      default: 'vertical' // level水平分布， vertical垂直分布
    },
    // 按钮时序
    isShowDimension: {
      type: Boolean,
      default: false
    },
    dimensionArr: {
      type: Array,
      default: function () {
        return ['本月', '本季度', '本年']
      }
    },
    // 模块类型， 默认是折线柱状图类型，
    moduleType: {
      type: String,
      default: 'barLine'
    }
  },
  data () {
    return {
      dimensionIndex: 0,
      legendColor: ['#2e92cb', '#b60d81', '#d38f44']
    }
  },
  computed: {
    pieType () {
      return this.$store.state.themeConfig.echartsTheme === 'default' ? '' : 'default'
    },
    seriesRadius () {
      return this.$store.state.themeConfig.echartsTheme === 'default' ? [['15%', '50%'], ['5%', '10%'], ['55%', '56%'], ['62%', '63%'], ['69%', '70%']] : [['40%', '70%']]
    },
    // 初始化dataZoom
    dataZoom () {
      let dataZoom
      if (this.moduleType !== 'pie' && !(this.moduleConfig instanceof Array) && this.moduleConfig.optionsConfig.dataZoom !== undefined) {
        if (this.moduleConfig.optionsConfig.seriesData.length === 3 && this.moduleConfig.optionsConfig.seriesData[0].data.length >= 9) {
          dataZoom = this.moduleConfig.optionsConfig.dataZoom
          dataZoom.endValue = 8
        }
        if (this.moduleConfig.optionsConfig.seriesData.length === 2) {
          // 如果模块宽度为1/3
          if (this.borderConfig.moduleType.indexOf('43') > -1) {
            if (this.moduleConfig.optionsConfig.seriesData[0].data && this.moduleConfig.optionsConfig.seriesData[0].data.length >= 8) {
              let dataZoom = this.moduleConfig.optionsConfig.dataZoom
              dataZoom.endValue = 7
            }
          } else {
            if (this.moduleConfig.optionsConfig.seriesData[0].data && this.moduleConfig.optionsConfig.seriesData[0].data.length >= 9) {
              let dataZoom = this.moduleConfig.optionsConfig.dataZoom
              dataZoom.endValue = 8
            }
          }
        }
        if (this.moduleConfig.optionsConfig.seriesData.length === 1 && this.moduleConfig.optionsConfig.seriesData[0].data && this.moduleConfig.optionsConfig.seriesData[0].data.length >= 12) {
          dataZoom = this.moduleConfig.optionsConfig.dataZoom
        }
      }
      return dataZoom
    }
  },
  methods: {
    changeDimension (index) {
      if (this.dimensionArr.length > 0) {
        this.dimensionIndex = index
        this.$parent.changeDimension({ ref: this.borderConfig.ref, index })
      }
    },
    resizeChart () {
      if (this.$refs.barLine) {
        this.$refs.barLine.resizeChart()
      }
      if (this.$refs.pie) {
        this.$refs.pie.resizeChart()
      }
      if (this.$refs.barLine0) {
        this.$refs.barLine0[0].resizeChart()
      }
      if (this.$refs.barLine1) {
        this.$refs.barLine1[0].resizeChart()
      }
    }
  },
  mounted () {
  },
  watch: {

  }
}
</script>

<style lang="scss" scoped="scoped">
.module-border {
  position: relative;
  float: left;
  .module {
    width: 100%;
    height: 100%;
    .message-li-main {
      width: calc(100% - 40px);
      margin: 0 20px;
      height: 100%;
      position: relative;
      display: inline-block;
      &.level {
        width: calc((100% / 2) - 40px);
        margin: 0 20px;
        float: left;
      }
      &.vertical {
        height: 50%;
      }
    }
    .legend {
      position: absolute;
      right: 0.4%;
      top: 1%;
      color: #fff;
      font-size: 12px;
      line-height: 18px;
      .legend-li {
        white-space: nowrap;
        text-align: left;
        i {
          display: inline-block;
          width: 10px;
          height: 10px;
          border-radius: 100%;
          margin-right: 5px;
        }
        &:nth-of-type(1) i{
          background: #e9e703;
        }
        &:nth-of-type(2) i{
          background: #e8605e;
        }
        &:nth-of-type(3) i{
          background: #19dc7c;
        }
        &:nth-of-type(4) i{
          background: #319ced;
        }
        &:nth-of-type(5) i{
          background: #fa9022;
        }
        &:nth-of-type(6) i{
          background: #8c70f8;
        }
        &:nth-of-type(7) i{
          background: #cadfea;
        }
        &:nth-of-type(8) i {
          background: #f59233;
        }
      }
    }
    .legend-level {
      position: absolute;
      /*width: 100%;*/
      padding-right: 1.66%;
      box-sizing: border-box;
      right: 0;
      top: 0;
      color: #fff;
      font-size: 12px;
      line-height: 18px;
      white-space: nowrap;
      text-align: right;
      .legend-li{
        margin-left: 15px;
        display: inline-block;
        i{
          display: inline-block;
          width: 10px;
          height: 10px;
          border-radius: 100%;
          margin-right: 5px;
        }
      }
    }
    .legend-list-left {
      top: 10px;
      left: 50px;
      right: auto;
    }
    .btn-list{
      position: absolute;
      top: -2%;
      right: 0;
      z-index: 20;
      height: 8.5%;
      padding-right: 1.66%;
      box-sizing: border-box;
      font-size: 12px;
      color: #b1cdf3;
      display: flex;
      justify-content: flex-end;
      span{
        display: flex;
        width: 36px;
        height: 100%;
        margin-left: 5px;
        justify-content: center;
        align-items: center;
        text-align: center;
        background: url(../../assets/images/module/timetype1.png) no-repeat center;
        background-size: 100%;
        position: relative;
        cursor: pointer;
        i{
          display: block;
          position: absolute;
          opacity: 0;
          width: 41.3%;
          height: 68%;
          left: 50%;
          bottom: 0;
          z-index: 10;
          transform: translate(-50%,42%);
          background: url(../../assets/images/module/present.png) no-repeat center;
          background-size: 100%;
          transition: opacity 0.3s linear;
        }
        &:nth-of-type(2){
          width: 46px;
          background: url(../../assets/images/module/timetype2.png) no-repeat center;
          background-size: 100%;
          &:hover{
            background: url(../../assets/images/module/timetypeActive2.png) no-repeat center;
            background-size: 100%;
          }
          &.active{
            background: url(../../assets/images/module/timetypeActive2.png) no-repeat center;
            background-size: 100%;
          }
          i{
            width: 32.5%;
          }
        }
        &:hover{
          background: url(../../assets/images/module/timetypeActive1.png) no-repeat center;
          background-size: 100%;
        }
        &.active{
          background: url(../../assets/images/module/timetypeActive1.png) no-repeat center;
          background-size: 100%;
          i{
            opacity: 1;
            transition: opacity 0.5s linear;
          }
        }
      }
    }
  }
}
</style>
